<template>
	<view class="container">
		<image src="../../static/images/index/bg.png" mode="" class="bg"></image>
		<view class="weather">
			<text class="top">{{weather}}</text>
			<text class="bottom">{{weatherSay}}</text>
		</view>
		<!-- <navigator class="addFarmland" url="../../subpkg/addFarmland/addFarmland">添加</navigator> -->
		<!-- 大棚状态 -->
		<view class="farmlandstate">
			<view class="left">
				<image src="../../static/images/index/Farm.png" mode=""></image>
			</view>
			<view class="right">
				<text style="font-size: 34rpx;font-family: ele;">大棚一</text>
				<text class="gray">{{ 'Farmlan 1' }}</text>
				<view class="bottom">
					<text class="gray">状态</text>
					<text style="font-size: 26rpx; color: #18BC37;margin-left: 15rpx;">{{ '正常' }}</text>
				</view>
			</view>
		</view>
		<!-- 标题 -->
		<view class="title">
			<text>状态监控</text>
			<uni-icons type="tune-filled" color="#76877c" size="20" class="icon"></uni-icons>
		</view>
		<!-- 温湿度 -->
		<view class="shidu-list">
			<view class="shidu-item" v-for="(item, index) in shiduList" :key="item.name">
				<image :src="item.bgurl" mode=""></image>
				<view class="content">
					<view class="value">
						<text class="num">{{ item.num }}</text>
						<text class="unit">{{ item.unit }}</text>
					</view>
					<view class="name">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<!-- 光强等 -->
		<view class="light-list">
			<view class="light-item" v-for="(item, i) in lightList" :key="item.name">
				<view class="left">
					<image :src="item.imgUrl" mode="" :class="'icon' + i"></image>
				</view>
				<view class="right">
					<text :class="'value' + i">{{ item.value }}</text>
					<text class="name">{{ item.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		v4
	} from 'uuid';
	import {
		MQTT_IP,
		MQTT_OPTIONS
	} from '@/utils/mqtt.js';
	var mqtt = require('mqtt/dist/mqtt.js')
	var client
	import {
		getMock
	} from '../../request/getmock.js'
	import {
		getWeather
	} from '../../request/getWeather.js'
	import {
		getWater1
	} from '../../request/getWeather.js'
	import {
		getWater2
	} from '../../request/getWeather.js'
	import {
		getWater3
	} from '../../request/getWeather.js'
	import {
		getSunLight
	} from '../../request/getWeather.js'
	export default {
		data() {
			return {
				intervalId: null,
				randomvalue: 0,
				weather: '天气 ',
				weatherSay: '',
				wavestyle: [
					"wave1", "wave2", "wave3"
				],
				topic: 'jcsf/iotdata',
				weatherList: [{
					name: 'Sun',
					value: ['晴']
				}, {
					name: 'Cloud',
					value: ['少云', '晴间多云', '多云', '阴']
				}, {
					name: 'Wind',
					value: ['有风', '平静', '和风', '清风', '强风/劲风', '疾风', '大风', '烈风', '风暴', '狂暴风', '飓风', '热带风暴']
				}, {
					name: 'Somg',
					value: ['霾', '中度霾', '重度霾', '严重霾']
				}, {
					name: 'Rain',
					value: ['阵雨', '雷阵雨', '雷阵雨并伴有冰雹', '小雨', '中雨', '大雨', '暴雨', '大暴雨', '特大暴雨', '强阵雨', '强雷阵雨', '极端降雨',
						'毛毛雨/细雨', '雨', '小雨-中雨', '中雨-大雨', '暴雨-大暴雨', '大暴雨-特大暴雨', '雨夹雪', '阵雨夹雪', '冻雨'
					]
				}, {
					name: 'Snow',
					value: ['雪', '阵雪', '小雪', '中雪', '大雪', '暴雪', '小雪-中雪', '中雪-大雪', '大雪-暴雪']
				}, {
					name: 'Sand',
					value: ['浮尘', '扬沙', '沙尘暴', '强沙尘暴', '龙卷风']
				}, {
					name: 'Fog',
					value: ['雾', '浓雾', '强浓雾', '轻雾', '大雾', '特强浓雾']
				}, {
					name: 'Unkown',
					value: ['热', '冷', '未知']
				}],
				Sun: {
					Sun1: {
						value: ['晴'],
						say: '天气晴朗，谨防紫外线侵扰。'
					}
				},
				Cloud: {
					Cloud1: {
						value: ['少云', '晴间多云', '多云', '阴'],
						say: '天气清爽，适宜出门运动'
					}

				},
				Wind: {
					Wind1: {
						value: ['有风', '平静', '和风', '清风'],
						say: '微风习习，适宜出门运动'
					},
					Wind2: {
						value: ['强风/劲风', '疾风', '大风'],
						say: '风力较大，不宜出行'
					},
					Wind3: {
						value: ['烈风', '风暴', '狂暴风', '飓风', '热带风暴'],
						say: '极端天气，请居家做好防护'
					}

				},
				Somg: {
					Somg1: {
						value: ['霾', '中度霾', '重度霾', '严重霾'],
						say: '雾霾天气，出行请佩戴口罩'
					}
				},
				Rain: {
					Rain1: {
						value: ['小雨', '毛毛雨/细雨'],
						say: '和风细雨，出行请佩戴雨伞'
					},
					Rain2:{
						value:['阵雨', '雷阵雨' , '雨'],
						say:'阵雨将至，出行请佩戴雨伞'
					},
					Rain3: {
						value: ['中雨', '大雨', '小雨-中雨', '中雨-大雨', '雨夹雪', '阵雨夹雪'],
						say: '中至大雨，出行请佩戴雨伞'
					},
					Rain4: {
						value: ['雷阵雨并伴有冰雹', '暴雨', '大暴雨', '特大暴雨', '强阵雨', '强雷阵雨', '极端降雨', '暴雨-大暴雨', '大暴雨-特大暴雨', '冻雨'],
						say: '极端天气，请居家做好防护'
					}
				},
				Snow: {
					Snow1: {
						value: ['雪', '阵雪', '小雪', '中雪', '小雪-中雪'],
						say: '小雪纷飞，请注意保暖'
					},
					Snow2: {
						value: ['大雪', '暴雪', '中雪-大雪', '大雪-暴雪'],
						say: '鹅毛大雪，出行请注意安全'
					}
				},
				Sand: {
					Sand1: {
						value: ['浮尘', '扬沙', '沙尘暴'],
						say: '空气中有浮尘，出行请佩戴口罩与护目镜'
					},
					Sand2: {
						value: ['强沙尘暴', '龙卷风'],
						say: '极端天气，请居家做好防护'
					}
				},
				Fog: {
					Fog1: {
						value: ['雾', '轻雾'],
						say: '薄雾蔼蔼，出行请注意安全'
					},
					Fog2: {
						value: ['浓雾', '强浓雾', '特强浓雾', '大雾'],
						say: '浓雾弥漫，不宜出行'
					}
				},
				Sunlight:'8827',
				Unkown: {
					Unkown1: {
						value: ['热'],
						say: '今天有点热，具体请去天气软件查看天气'
					},
					Unkown2: {
						value: ['冷'],
						say: '今天有点冷，具体请去天气软件查看天气'
					},
					Unkown3: {
						value: ['未知'],
						say: '请去天气软件查看天气'
					},
				},
				shiduList: [{
						bgurl: '../../static/images/index/bolang1.png',
						num: '36°/46',
						unit: 'hPa',
						name: '空气温湿度'
					},
					{
						bgurl: '../../static/images/index/bolang3.png',
						num: '6.9',
						unit: '=PH',
						name: '土壤酸碱度'
					},
					{
						bgurl: '../../static/images/index/bolang2.png',
						num: '32°/46',
						unit: 'hPa',
						name: '土壤温湿度'
					}
				],
				lightList: [{
						imgUrl: '../../static/images/index/light.png',
						value: '8521',
						name: '光照强度'
					},
					{
						imgUrl: '../../static/images/index/rain.png',
						value: '0.0',
						name: '降雨量'
					},
					{
						imgUrl: '../../static/images/index/windspeed.png',
						value: 1,
						name: '风力级别'
					},
					{
						imgUrl: '../../static/images/index/winddirection.png',
						value: '东南风',
						name: '风向'
					}
				]
			}
		},
		created() {
			// this.dataRefreh();
			this.initWeather();
			this.getWeathermessage();
			this.getSunlight();
		},
		onLoad() {
			// this.clear();

		},
		mounted() {
			// this.connect() //连接
		},
		methods: {
			async getWeathermessage() {
				const {
					data: res
				} = await getWeather();
				let nowWeather = res.lives[0].weather;
				console.log(nowWeather);
				for(let i = 0 ; i<this.weatherList.length;i++){
					if(this.weatherList[i].value.includes(nowWeather)){
						console.log(this.weatherList[i].name)
						for(let item in this[this.weatherList[i].name]){
							console.log(item)
							if(this[this.weatherList[i].name][item].value.includes(nowWeather)){
								console.log(this[this.weatherList[i].name][item].say);
								this.weatherSay=this[this.weatherList[i].name][item].say;
								
								
							}
						}
					}
				}

			},
			async getSunlight() {
				const {
					data: res
				} = await getSunLight();
				console.log('res')
				console.log(res)
				this.lightList[0].value =res.sunlight;
				console.log(res.sunlight)

			},
			connect() {
				MQTT_OPTIONS.clientId = v4()
				var that = this
				// #ifdef H5
				client = mqtt.connect('ws://' + MQTT_IP, MQTT_OPTIONS)
				// #endif
				// #ifdef MP-WEIXIN||APP-PLUS
				client = mqtt.connect('wx://' + MQTT_IP, MQTT_OPTIONS)
				// #endif
				client.on('connect', function() {
					console.log('连接成功')
					client.subscribe(that.topic, function(err) {
						if (!err) {
							console.log('订阅成功')
						}
					})
				}).on('reconnect', function(error) {
					console.log('正在重连...', that.topic)
				}).on('error', function(error) {
					console.log('连接失败...', error)
				}).on('end', function() {
					console.log('连接断开')
				}).on('message', function(topic, message) {
					console.log('接收推送信息：', message.toString())
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			async initWeather() {
				const {
					data: res
				} = await getWeather();
				console.log(res.lives[0]);
				this.weather += res.lives[0].weather;
				this.shiduList[0].num = res.lives[0].temperature + '°/' + res.lives[0].humidity;
				this.shiduList[2].num = parseInt((+res.lives[0].temperature + 2) * 1.1) + '°/' + parseInt((+res.lives[
					0].humidity + 2) * 1.1);
				this.lightList[2].value = res.lives[0].windpower;
				this.lightList[3].value = res.lives[0].winddirection + '风';
				// 这里请求降雨量，只有2000次次数
				let {
					data: res2
				} = await getWater1();
				console.log(res2);
				if (res2.errcode == 0) {
					console.log("调用1账号")
					this.lightList[1].value = res2.data[0].value;
				} else {

					let {
						data: res2
					} = await getWater2();
					if (res2.errcode == 0) {
						console.log("调用2账号")
						this.lightList[1].value = res2.data[0].value;
					} else {
						let {
							data: res2
						} = await getWater3();
						if (res2.errcode == 0) {
							console.log("调用3账号")
							this.lightList[1].value = res2.data[0].value;
						}
					}
				}

			}
			// dataRefreh() {
			//       // 计时器正在进行中，退出函数
			//       if (this.intervalId != null) {
			//         return;
			//       }
			//       // 计时器为空，操作
			//       this.intervalId = setInterval(() => {
			//         console.log("刷新" + this.shiduList[1].num);
			// 		this.shiduList[0].num=Math.floor(Math.random() * 2  +36)+"°/"+"47";
			// 		this.shiduList[1].num=(Math.floor(Math.random()*4)/10+6.8).toFixed(1);
			// 		this.shiduList[2].num=Math.floor(Math.random() * 2  +31)+"°/"+"47";
			// 		this.lightList[0].value=8200+Math.floor(Math.random() * 200);
			// 		// this.lightList[1].value=Math.floor(Math.random() * 2  +31)+"°/"+"47";
			// 		this.lightList[2].value=Math.floor(Math.random()*4)/10;
			// 		// this.lightList[3].value=Math.floor(Math.random() * 2  +31)+"°/"+"47";

			//       }, 5000);
			//     }, 
			//     // 停止定时器
			//     clear() {
			//       clearInterval(this.intervalId); //清除计时器
			//       this.intervalId = null; //设置为null
			//     }
		}
	}
</script>

<style lang="less">
	.bg {
		width: 100%;
		height: 420rpx;
	}

	.weather {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 170rpx;
		left: 50rpx;
		color: #FFFFFF;

		.top {
			font-size: 60rpx;
			letter-spacing: 4rpx;
			margin-bottom: 20rpx;
			font-weight: bold;
		}

		.bottom {
			font-size: 30rpx;
		}
	}

	.addFarmland {
		position: absolute;
		top: 320rpx;
		left: 50rpx;
		width: 120rpx;
		height: 50rpx;
		background-color: #FFFFFF;
		font-size: 26rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 10rpx;

		&::after {
			position: absolute;
			top: 15rpx;
			right: 2rpx;
			content: '';
			border: 10rpx solid transparent;
			border-left-color: #333333;
		}
	}

	.farmlandstate {
		display: flex;
		box-sizing: border-box;
		width: 658rpx;
		height: 180rpx;
		padding: 30rpx 20rpx 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0 1px 0 0 rgba(150, 150, 150, .2);
		margin: 0 auto;
		.left image {
			width: 150rpx;
			height: 120rpx;
			margin-right: 30rpx;
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			color: #68757b;
			letter-spacing: 2rpx;

			.gray {
				color: #68757b;
				font-size: 25rpx;
			}
		}
	}

	.title {
		position: relative;
		margin-top: 25rpx;
		margin-left: 50rpx;
		font-size: 36rpx;

		text {
			margin-right: 10rpx;
		}

		.icon {
			position: absolute;
			top: 0rpx;
		}
	}

	.shidu-list {
		position: relative;
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;
		padding: 0 35rpx;
		margin-bottom: 25rpx;

		.shidu-item {
			position: relative;
			width: 215rpx;
			height: 305rpx;
			overflow: hidden;

			border-radius: 10rpx;

			image {
				width: 100%;
				height: 100%;
			}

			.content {
				position: absolute;
				top: 0;
				left: 0;

				.value {
					margin-top: 30rpx;
					margin-bottom: 20rpx;
					margin-left: 15rpx;
					color: #68757b;

					.num {
						font-size: 40rpx;
						margin-right: 8rpx;
						color: #68757b;
					}

					.unit {
						font-size: 32rpx;
						color: #68757b;
					}
				}

				.name {
					margin-left: 20rpx;
					margin-top: -10rpx;
					font-size: 30rpx;
					color: #68757b;
				}
			}
		}
	}

	.light-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 0 19rpx;

		.light-item {
			display: flex;
			align-items: center;
			width: 44%;
			height: 160rpx;
			background-color: #FFFFFF;
			margin-bottom: 42rpx;
			border-radius: 15rpx;
			box-shadow: 0 1px 0px 0px rgba(150, 150, 150, .1);

			.left [class^=icon] {
				width: 90rpx;
				height: 90rpx;
				margin: 0 30rpx 0 30rpx;

				&.icon1,
				&.icon3 {
					width: 85rpx;
					height: 85rpx;
				}

				&.icon2 {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: column;

				[class ^=value] {
					font-size: 45rpx;
					color: #66c3a9;

					&.value3 {
						font-size: 39rpx;
					}
				}

				.name {
					font-size: 30rpx;
					color: #697b6f;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>
